<template>
  <div class="app-container">
    <!--工具栏-->
    <el-card
      shadow="hover"
      class="maBt15"
      v-if="checkPermission(['account@index']) && $store.state.user.queryShow"
    >
      <el-form inline>
        <el-form-item :label="$t('vip.vip1')">
          <el-input
            v-model="formInline.account"
            clearable
            :placeholder="$t('vip.vip1')"
            style="width: 150px"
            class="filter-item"
          />
        </el-form-item>
        <el-form-item :label="$t('vip.vip2')">
          <el-input
            v-model="formInline.nickname"
            clearable
            :placeholder="$t('vip.vip2')"
            style="width: 150px"
            class="filter-item"
          />
        </el-form-item>
        <el-form-item :label="$t('vip.vip3')">
          <el-select
            v-model="formInline.open_status"
            :placeholder="$t('vip.vip3')"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="item in openOption"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('vip.vip4')">
          <date-range-picker
            v-model="formInline.created_at"
            class="date-item"
          />
        </el-form-item>
        <el-button class="filter-item" type="primary" @click="toQuery">{{
          $t("common.common4")
        }}</el-button>
      </el-form>
    </el-card>
    <el-card shadow="hover">
      <div slot="header" class="clearfix operateBtn">
        <el-popover
          placement="top"
          width="160"
          v-model="popvisible"
          v-permission="['account@import']"
        >
          <p>
            <i
              class="el-icon-question"
              style="color: #ff9900; margin-right: 10px"
            ></i>
            {{ $t("vip.vip6") }}
          </p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="popvisible = false">{{
              $t("common.common1")
            }}</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="outFile('popvisible')"
              >{{ $t("common.common2") }}</el-button
            >
          </div>
          <el-button slot="reference" type="warning" icon="el-icon-download">{{
            $t("vip.vip9")
          }}</el-button>
        </el-popover>
        <el-upload
          :action="uploadUrl"
          :headers="uploadHeader"
          :before-upload="beforeAvatarUpload"
          :on-success="handleSuccess"
          v-permission="['account@import']"
        >
          <el-button type="success" icon="el-icon-upload2">{{
            $t("vip.vip10")
          }}</el-button>
        </el-upload>
        <el-popover
          placement="top"
          width="160"
          v-model="popOutvisible"
          v-permission="['account@export']"
        >
          <p>
            <i
              class="el-icon-question"
              style="color: #ff9900; margin-right: 10px"
            ></i>
            {{ $t("vip.vip11") }}
          </p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="popOutvisible = false">{{
              $t("common.common1")
            }}</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="outFile('popOutvisible')"
              >{{ $t("common.common2") }}</el-button
            >
          </div>
          <el-button slot="reference" type="primary" icon="el-icon-download">
            {{ $t("vip.vip12") }}</el-button
          >
        </el-popover>
        <query-btn />
      </div>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        border
        highlight-current-row
        :max-height="$store.state.app.tableHeight"
        v-permission="['account@index']"
      >
        <el-table-column prop="id" min-width="80" fixed="left" label="ID" />
        <el-table-column
          prop="country_code"
          min-width="80"
          :label="$t('vip.vip13')"
        />
        <el-table-column
          prop="account"
          min-width="150"
          :label="$t('vip.vip1')"
        />
        <el-table-column
          prop="nickname"
          min-width="150"
          show-overflow-tooltip
          :label="$t('vip.vip2')"
        />
        <el-table-column
          prop="open_status"
          min-width="120"
          :label="$t('vip.vip3')"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.open_status | getTagType">{{
              scope.row.open_status | release(openOption)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="real_name"
          min-width="120"
          :label="$t('vip.vip14')"
        />
        <el-table-column prop="from" min-width="150" :label="$t('vip.vip15')" >
          <template slot-scope="scope">
            <span>{{
             scope.row['from_'+langSufx]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="login_ip" min-width="200" :label="$t('vip.vip20')">
          <template slot-scope="scope">
            <span>{{
              scope.row.account_login_log && scope.row.account_login_log[0]
                ? scope.row.account_login_log[0].login_ip
                : "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="region" min-width="200" :label="$t('vip.vip19')">
          <template slot-scope="scope">
            <span>{{
              scope.row.account_login_log && scope.row.account_login_log[0]
                ? scope.row.account_login_log[0].region
                : "--"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          min-width="200"
          :label="$t('vip.vip4')"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.created_at) }}</span>
          </template>
        </el-table-column>
        <!--   操作   -->
        <el-table-column
          :label="$t('common.common3')"
          min-width="120px"
          align="center"
          fixed="right"
          class-name="iconBtn"
          v-if="checkPermission(['account@read', 'account@update'])"
        >
          <template slot-scope="scope">
            <span
              @click="toAddEdit(scope.row.id)"
              v-permission="['account@read']"
            >
              <btn-tip
                :content="$t('vip.vip5')"
                type="primary"
                icon="el-icon-view"
              ></btn-tip>
            </span>
            <span
              @click="resPass(scope.row.id)"
              v-permission="['account@update']"
              v-show="
                scope.row.open_status != '1' && scope.row.open_status != '5'
              "
            >
              <btn-tip
                :content="$t('vip.vip7')"
                type="success"
                icon="el-icon-set-up"
              ></btn-tip>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination
        v-permission="['account@index']"
        :total="tableShow.listCount"
        :page.sync="tableShow.currentPage"
        :page-size.sync="tableShow.pageSize"
        @pageChange="getList"
      />
    </el-card>
    <!--表单渲染-->
    <add-edit ref="add_edit" />
    <res-pass ref="res_pass" />
  </div>
</template>

<script>
import AddEdit from "./add_edit";
import ResPass from "./resset_pass";
import { parseTime } from "@/utils/index";
import { getToken } from "@/utils/auth";
import { getCusList, exData, downAccount } from "@/api/vip/vip";
import { openOption } from "@/assets/js/common";
import DateRangePicker from "@/components/DateRangePicker";

export default {
  components: {
    DateRangePicker,
    AddEdit,
    ResPass,
  },
  data() {
    return {
      openOption,
      popvisible: false, //pop 弹出框（提示）
      popOutvisible: false, //pop 弹出框（提示）
      uploadUrl: this.$store.state.api.baseApi + "admin/account/import",
      uploadHeader: {
        Authorization: "Bearer " + getToken(),
        "Accept-Language":
          this.$store.state.settings.language == "en-US"
            ? "en"
            : this.$store.state.settings.language == "zh-TW"
            ? "zh-HK"
            : this.$store.state.settings.language,
      },
      loading: false,
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0,
      },
      tableData: [],
      formInline: {
        account: "",
        nickname: "",
        open_status: "",
        created_at: [],
      },
    };
  },
  computed:{
    langSufx() {
      return this.$store.state.settings.langTail;
    },
  },
  created() {
    if (this.$route.query.created_at) {
      this.$store.dispatch("setQuery", true);
      //首页 跳入
      this.formInline.created_at = this.$route.query.created_at;
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    parseTime,
    getList() {
      this.loading = true;
      getCusList(
        Object.assign({}, this.formInline, {
          created_at:
            this.formInline.created_at && this.formInline.created_at.length != 0
              ? [
                  parseInt(this.formInline.created_at[0] / 1000),
                  parseInt(this.formInline.created_at[1] / 1000),
                ]
              : [],
          page: this.tableShow.currentPage,
          limit: this.tableShow.pageSize,
        })
      )
        .then((res) => {
          if (res.code == 10000) {
            this.tableData = res.data;
            this.loading = false;
            this.tableShow.listCount = res.count;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
    toQuery() {
      this.tableShow.currentPage = 1;
      this.getList();
    },
    toAddEdit(rowID) {
      this.$refs.add_edit.init(rowID);
    },
    resPass(rowID) {
      this.$refs.res_pass.init(rowID);
    },
    beforeAvatarUpload(file) {
      const arr  = file.name.split(".")
      const isXLSX = arr[arr.length - 1] === ("xlsx" || "xls");
      if (!isXLSX) {
        this.$message.error(this.$t("vip.vip8"));
      } else if (file.size > 1024 * 1024 * 200) {
        //大于200兆文件 不能上传
        this.$message.error(this.$t("vip.vip16"));
        return false;
      } else {
        this.loading = true;
      }
      return isXLSX;
    },
    handleSuccess(response) {
      if (response.code === 10000) {
        this.$message.success(response.message);
      } else {
        this.$message.error(response.message);
      }
      this.loading = false;
      this.getList();
    },
    outFile(name) {
      if (name == "popvisible") {
        // 下载模板
        downAccount()
          .then((res) => {
            if (res.code == 10000) {
              window.open(res.data.url);
              this.popvisible = false;
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((error) => {
            this.$message.error(error.Error);
          });
      } else {
        // 导出数据
        exData(
          Object.assign({}, this.formInline, {
            created_at:
              this.formInline.created_at &&
              this.formInline.created_at.length != 0
                ? [
                    parseInt(this.formInline.created_at[0] / 1000),
                    parseInt(this.formInline.created_at[1] / 1000),
                  ]
                : [],
          })
        )
          .then((res) => {
            if (res.code == 10000) {
              window.open(res.data.url);
              this.popOutvisible = false;
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((error) => {
            this.$message.error(error.Error);
          });
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
::v-deep .el-upload-list {
  display: none;
}
.operateBtn {
  > div {
    display: inline-block;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>